<template>
	<view class="followpage">
			<view style="background: #000000;height: 100%;">
				<uni-search-bar 
				radius="5" 
				placeholder="搜索好友" 
				clearButton="auto" 
				cancelButton="auto" 
				@confirm="searchUser" />
			</view>
			
			<view class="words">
				<text>全部关注</text>
				<image src="../../../static/icon/arrow.png" mode=""></image>
			</view>
			
			<div class="search_result">
			  <!-- <mt-loadmore ref="loadmore" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" :auto-fill="false"> -->
			    <li v-for="follow in followList">
			      <div class="person">
			        <!-- <img :src="follow.user.head" onerror="this.src='../../../static/icon/default/head_not_found.jpg'"> -->
					<dh-image :src="follow.user.head" errorSrc="../../../static/icon/default/head_not_found.jpg"></dh-image>
			        <div class="info">
			          <p>{{follow.user.name}}</p>
			          <span>{{follow.user.description}}</span>
			        </div>
			        <img v-if="follow.isFollow" src="../../../static/icon/have_concern.png"
			             v-on:click="cancelFollow(follow.user.id)"
			             style="width: 1.8rem;height: 1.8rem;margin-top: 0.5rem">
			        <img v-else src="../../../static/icon/mutual.png" v-on:click="cancelFollow(follow.user.id)"
			             style="width: 2rem;height: 2rem;margin-top: 0.7rem">
			      </div>
			    </li>
			  <!-- </mt-loadmore> -->
			</div>
				<uni-load-more :status="status" @clickLoadMore="loadBottom" />
				
			</div>
		</view>
</template>

<script>
	import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue"
	import dhImage from '@/components/dh-image/dh-image'
	import uniSearchBar from '@/components/uni-search-bar/uni-search-bar.vue'
	import {
		SELECT_FOLLOW,
		SEARCH_FOLLOW,
		CANCEL_FOLLOW,
	} from '@/store/mutation-types.js'
	
	
	export default {
	    components: {
			uniSearchBar,
			uniLoadMore,
			dhImage,
		},
		
		data() {
			return {
				value: '',
				followList: [],
				groupList: [],
				page: 1,
				status: 'more',
			}
		},
		
		mounted() {
		    this.selectFollow();
		    this.selectGroup();
		},
		
		methods: {
			selectFollow() {
			    let app = this;
			    let success = (result) => {
			        if (result.error === "0") {
			            for (let i = 0; i < result.data.list.length; i++) {
			                let item = result.data.list[i];
			                app.followList.push(item);
			            }
			            if (result.data.list.length == result.data.pageSize) {
			                app.page++;
			            } else {
			                app.status = 'noMore';
			            }
			        } else {
			            this.$toast(result.error);
			        }
			    }
				let data = {
					"pageNum":app.page
				};
			    console.log(data)
			    app.$store.dispatch(`user/${SELECT_FOLLOW}`,{
			    	data,
			    	onSuccess:success
			    })
			},
			// selectGroup() {
			//     success = (result) => {
			//         if (result.error === "0") {
			//             this.groupList = result.data.list;
			//         } else {
			//             this.$toast(result.error);
			//         }
			//     }
			//     AjaxHelper.get(this.getGroupUrl, null, success);
			// },
			searchUser(res) {
			    let app = this;
			    let success = (result) => {
			        if (result.error == "0") {
			            this.followList = [];
			            this.followList = result.data.list;
			        } else {
			            app.$toast(result.error);
			        }
			    }
				let data = {
					name:res.value
				}
				console.log(app.list)
				app.$store.dispatch(`user/${SEARCH_FOLLOW}`,{
					data,
					onSuccess:success
				})
			},
			// goToGroup(id, name) {
			//     window.parent.location.href = './group_follow.html?groupingId=' + id + "&groupName=" + name;
			// },
			cancelFollow(id) {
				//取消关注
				let app = this;
				let data = {
					"followId": id
				};
				success = (result) => {
					if (result.error == 0) {
						app.$toast("取消关注成功");
					} else {
						app.$toast(result.error);
					}
				}
				console.log(data)
				app.$store.dispatch(`user/${CANCEL_FOLLOW}`,{
					data,
					onSuccess:success
				})
			},
			loadBottom() {
				let app = this;
				setTimeout(function () {
					app.selectFollow();
					app.status = 'loading';
				}, 500)
			},
		},
	}
</script>

<style>
text {
	font-size: 16px;
	font-family: 'Microsoft YaHei','华文细黑', Tahoma, Arial, sans-serif;
	color: #555;
}

.words{
	padding: 0 0.5rem;
	display: flex;
}
.words text{
	margin: 0;
	color: #5e5b5b;
}
.words image{
	width: 1rem;
	height: 1rem;
	margin-top: 0.2rem;
}
.search_result{
	margin-top: 0.5rem;
}
.search_result uni-list-item{
	list-style-type:none;
	margin-top: 0.5rem;
}
.search_result image{
/* 	width: 2.8rem;
	height: 2.8rem; */
	width: 2.0rem;
	height: 2.0rem;
}


.search_result{

	margin-top: 0.5rem;

}
.search_result li{
	list-style-type:none;
	margin-top: 0.5rem;
}
.search_result li .person{
	display:flex ;
	background: #FFFFFF;
	padding:0.5rem;
}
.search_result li .person img{
	width: 2.8rem;
	height: 2.8rem;
}

.search_result li .person .info{
	flex: 3;
	margin-left: 1.2rem;
}
.search_result li .person .info p{
	margin: 0;
	margin-bottom: 0.5rem;
}
.search_result li .person .info span{
	font-size: 0.9rem;
	color: #828282;
	margin-top: 0.2rem;
}

/* 头条小程序组件内不能引入字体 */
/* #ifdef MP-TOUTIAO */
@font-face {
	font-family: uniicons;
	font-weight: normal;
	font-style: normal;
	src: url('~@/static/uni.ttf') format('truetype');
}

/* #endif */

/* #ifndef APP-NVUE */
page {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	background-color: #efeff4;
	min-height: 100%;
	height: auto;
}

view {
	font-size: 14px;
	line-height: inherit;
}

.example {
	padding: 0 15px 15px;
}

.example-info {
	padding: 15px;
	color: #3b4144;
	background: #ffffff;
}

.followpage {
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	padding: 0;
	font-size: 14px;
	background-color: #ffffff;
}

/* #endif */
.example {
	padding: 0 15px;
}

.example-info {
	/* #ifndef APP-NVUE */
	display: block;
	/* #endif */
	padding: 15px;
	color: #3b4144;
	background-color: #ffffff;
	font-size: 14px;
	line-height: 20px;
}

.example-info-text {
	font-size: 14px;
	line-height: 20px;
	color: #3b4144;
}


.followpage {
	flex-direction: column;
	padding: 15px;
	background-color: #ffffff;
}

.word-btn-white {
	font-size: 18px;
	color: #FFFFFF;
}

.word-btn {
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: row;
	align-items: center;
	justify-content: center;
	border-radius: 6px;
	height: 48px;
	margin: 15px;
	background-color: #007AFF;
}

.word-btn--hover {
	background-color: #4ca2ff;
}



.search-result {
	margin-top: 10px;
	margin-bottom: 20px;
	text-align: center;
}

.search-result-text {
	text-align: center;
	font-size: 14px;
}

.followpage {
	/* #ifndef APP-NVUE */
	display: block;
	/* #endif */
	padding: 0px;
}
</style>
